<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <style>
        .user-management {
            margin-top: 80px;
            width: 1000px;

        }

        .user-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .user-table th, .user-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        .user-table th {
            background-color: #4a76a8;
            color: white;
        }

        .user-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .action-button {
            padding: 6px 12px;
            margin-right: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .edit-button {
            background-color: #4CAF50;
            color: white;
        }

        .delete-button {
            background-color: #f44336;
            color: white;
        }

        .add-user-form {
            margin-top: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 5px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 400px;
        }

        .close-button {
            float: right;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="top-navbar">
    <div class="logo">AI简历分析助手</div>
    <div class="user-info">
        <span id="usernameDisplay">用户</span>
        <button onclick="window.location.href='index.html'" class="action-button">返回主界面</button>
        <button id="logoutBtn" class="logout-btn">退出</button>
    </div>
</div>

<div class="user-management">
    <h1>用户管理</h1>

    <!-- 查询表单 -->
    <div class="search-form">
        <input type="text" id="searchUsername" placeholder="用户名">
        <select id="searchRole">
            <option value="">所有角色</option>
            <option value="ROLE_USER">普通用户</option>
            <option value="ROLE_ADMIN">管理员</option>
            <option value="ROLE_ROOT">超级管理员</option>
        </select>
        <button onclick="searchUsers()">查询</button>
    </div>
</div>

<!-- 用户表格 -->
<table class="user-table">
    <!-- 表格内容 -->
</table>

<!-- 分页控件 -->
<div class="pagination">
    <button id="prevPage" onclick="changePage(-1)">上一页</button>
    <span id="currentPage">1</span> / <span id="totalPages">1</span>
    <button id="nextPage" onclick="changePage(1)">下一页</button>
    <span>每页显示:</span>
    <select id="pageSize" onchange="changePageSize()">
        <option value="5">5</option>
        <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>
</div>

    <table class="user-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>角色</th>
            <th>最近登录</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="userTableBody">
        <!-- 用户数据将通过JS动态填充 -->
        </tbody>
    </table>

    <div class="add-user-form">
        <h2>添加新用户</h2>
        <form id="addUserForm">
            <div class="form-group">
                <label for="newName">姓名</label>
                <input type="text" id="newName" required>
            </div>
            <div class="form-group">
                <label for="newUsername">用户名</label>
                <input type="text" id="newUsername" required>
            </div>
            <div class="form-group">
                <label for="newPassword">密码</label>
                <input type="password" id="newPassword" required>
            </div>
            <div class="form-group">
                <label for="newRoles">角色</label>
                <select id="newRoles" required>
                    <option value="ROLE_USER">普通用户</option>
                    <option value="ROLE_ADMIN">管理员</option>
                    <option value="ROLE_ROOT">超级管理员</option>
                </select>
            </div>
            <button type="submit" class="action-button">添加用户</button>
        </form>
    </div>
</div>

<!-- 编辑用户模态框 -->
<div id="editUserModal" class="modal">
    <div class="modal-content">
        <span class="close-button" onclick="closeEditModal()">&times;</span>
        <h2>编辑用户</h2>
        <form id="editUserForm">
            <input type="hidden" id="editUserId">
            <div class="form-group">
                <label for="editName">姓名</label>
                <input type="text" id="editName" required>
            </div>
            <div class="form-group">
                <label for="editUsername">用户名</label>
                <input type="text" id="editUsername" required>
            </div>
            <div class="form-group">
                <label for="editPassword">新密码 (留空则不修改)</label>
                <input type="password" id="editPassword">
            </div>
            <div class="form-group">
                <label for="editRoles">角色</label>
                <select id="editRoles" required>
                    <option value="ROLE_USER">普通用户</option>
                    <option value="ROLE_ADMIN">管理员</option>
                    <option value="ROLE_ROOT">超级管理员</option>
                </select>
            </div>
            <button type="submit" class="action-button">保存修改</button>
        </form>
    </div>
</div>

<script src="script.js"></script>
<script>
    let currentPage = 0;
    let totalPages = 1;
    let pageSize = 10;
    let searchUsername = '';
    let searchRole = '';

    // 退出登录
    document.getElementById('logoutBtn').addEventListener('click', logout);
    // 页面加载时获取用户列表
    document.addEventListener('DOMContentLoaded', function () {
        fetchUsers();
        //显示当前用户
        const token = localStorage.getItem('token');
        const payload = JSON.parse(atob(token.split('.')[1]));
        if (payload.username) {
            document.getElementById('usernameDisplay').textContent = payload.username;
        }

        // 绑定添加用户表单
        document.getElementById('addUserForm').addEventListener('submit', function (e) {
            e.preventDefault();
            addUser();
        });

        // 绑定编辑用户表单
        document.getElementById('editUserForm').addEventListener('submit', function (e) {
            e.preventDefault();
            updateUser();
        });
    });

    // 获取用户列表
    // 获取用户列表（带分页和查询）
    async function fetchUsers() {
        try {
            const params = new URLSearchParams({
                page: currentPage,
                size: pageSize,
                username: searchUsername,
                role: searchRole
            });

            const response = await fetchWithAuth(`http://localhost:8080/api/users/search?${params}`);
            const data = await response.json();

            // 更新分页信息
            currentPage = data.currentPage;
            totalPages = data.totalPages;
            updatePagination();

            // 渲染用户表格
            renderUserTable(data.users);
        } catch (error) {
            console.error('获取用户列表失败:', error);
            alert('获取用户列表失败');
        }
    }

    // 更新分页控件状态
    function updatePagination() {
        document.getElementById('currentPage').textContent = currentPage + 1;
        document.getElementById('totalPages').textContent = totalPages;

        // 更新按钮状态
        document.getElementById('prevPage').disabled = currentPage === 0;
        document.getElementById('nextPage').disabled = currentPage === totalPages - 1;
    }

    // 执行查询
    function searchUsers() {
        searchUsername = document.getElementById('searchUsername').value;
        searchRole = document.getElementById('searchRole').value;
        currentPage = 0; // 重置到第一页
        fetchUsers();
    }

    // 改变页码
    function changePage(direction) {
        const newPage = currentPage + direction;
        if (newPage >= 0 && newPage < totalPages) {
            currentPage = newPage;
            fetchUsers();
        }
    }

    // 改变每页显示数量
    function changePageSize() {
        pageSize = parseInt(document.getElementById('pageSize').value);
        currentPage = 0; // 重置到第一页
        fetchUsers();
    }

    // 渲染用户表格
    function renderUserTable(users) {
        const tableBody = document.getElementById('userTableBody');
        tableBody.innerHTML = '';

        users.forEach(user => {
            const row = document.createElement('tr');

            // 格式化登录时间
            const loginTime = user.resentLoginTime ?
                new Date(user.resentLoginTime).toLocaleString() : '从未登录';

            row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.roles}</td>
                    <td>${loginTime}</td>
                    <td>
                        <button class="action-button edit-button" onclick="openEditModal(${user.id})">编辑</button>
                        <button class="action-button delete-button" onclick="deleteUser(${user.id})">删除</button>
                    </td>
                `;

            tableBody.appendChild(row);
        });
    }

    // 添加新用户
    async function addUser() {
        const newUser = {
            name: document.getElementById('newName').value,
            username: document.getElementById('newUsername').value,
            password: document.getElementById('newPassword').value,
            roles: document.getElementById('newRoles').value
        };

        try {
            const response = await fetchWithAuth('http://localhost:8080/api/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(newUser)
            });

            if (response.ok) {
                alert('用户添加成功');
                document.getElementById('addUserForm').reset();
                fetchUsers(); // 刷新列表
            } else {
                alert('添加用户失败: ' + await response.text());
            }
        } catch (error) {
            console.error('添加用户失败:', error);
            alert('添加用户失败');
        }
    }

    // 打开编辑模态框
    async function openEditModal(userId) {
        try {
            // 获取用户信息
            const response = await fetchWithAuth(`http://localhost:8080/api/users/${userId}`);
            const user = await response.json();

            // 填充表单
            document.getElementById('editUserId').value = user.id;
            document.getElementById('editName').value = user.name;
            document.getElementById('editUsername').value = user.username;
            document.getElementById('editRoles').value = user.roles;

            // 显示模态框
            document.getElementById('editUserModal').style.display = 'block';
        } catch (error) {
            console.error('获取用户信息失败:', error);
            alert('获取用户信息失败');
        }
    }

    // 关闭编辑模态框
    function closeEditModal() {
        document.getElementById('editUserModal').style.display = 'none';
    }

    // 更新用户信息
    async function updateUser() {
        const userId = document.getElementById('editUserId').value;
        const updatedUser = {
            id: parseInt(userId),
            name: document.getElementById('editName').value,
            username: document.getElementById('editUsername').value,
            password: document.getElementById('editPassword').value,
            roles: document.getElementById('editRoles').value
        };

        try {
            const response = await fetchWithAuth(`http://localhost:8080/api/users/${userId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(updatedUser)
            });

            if (response.ok) {
                alert('用户信息更新成功');
                closeEditModal();
                fetchUsers(); // 刷新列表
            } else {
                alert('更新用户失败: ' + await response.text());
            }
        } catch (error) {
            console.error('更新用户失败:', error);
            alert('更新用户失败');
        }
    }

    // 删除用户
    async function deleteUser(userId) {
        if (!confirm('确定要删除这个用户吗？此操作不可撤销。')) return;

        try {
            const response = await fetchWithAuth(`http://localhost:8080/api/users/${userId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                alert('用户删除成功');
                if (document.getElementById('userTableBody').children.length === 1 && currentPage > 0) {
                    currentPage--;
                }
                fetchUsers(); // 刷新列表
            } else {
                alert('删除用户失败: ' + await response.text());
            }
        } catch (error) {
            console.error('删除用户失败:', error);
            alert('删除用户失败');
        }
    }
</script>
</body>
</html>